<script setup lang="ts">
import DataBrowsingHeaderView from "@/views/dataBrowsing/header/index.vue";
import { useDataBrowsing } from "@/views/dataBrowsing/hook.tsx";
import DataBrowsingTableView from "@/views/dataBrowsing/table/index.vue";

defineOptions({
	name: "DataBrowsingView",
});
const { loading, hits, total, current, pageSize, changeSearch, isSearchEmpty, onShowSizeChange, handleRefreshSearch } = useDataBrowsing();
</script>

<template>
	<div class="data-browsing-view animate__animated animate__fadeIn">
		<data-browsing-header-view @change-search="changeSearch" @handle-refresh-search="handleRefreshSearch" />
		<div class="data-browsing-content animate__animated animate__fadeIn">
			<data-browsing-table-view :hits="hits" :loading="loading" v-if="!isSearchEmpty" />
			<div class="data-browsing-empty" v-if="isSearchEmpty && !loading"><a-empty /></div>
		</div>
		<div class="data-browsing-footer-view animate__animated animate__fadeIn" v-if="total > pageSize">
			<a-pagination v-model:current="current" v-model:pageSize="pageSize" show-size-changer :total="total" @showSizeChange="onShowSizeChange" />
		</div>
	</div>
</template>

<style scoped lang="scss">
.data-browsing-view {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.data-browsing-content {
	overflow: auto;
	flex: 1;
	height: 100%;
}
.data-browsing-empty {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.data-browsing-footer-view {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
}
</style>
